<template>
  <view class="settings-container">
    <!-- 导航栏 -->
    <nav-bar></nav-bar>
    <!-- 账号信息部分 -->
    <view class="section-title">我的账号</view>
    <view class="menu-list">
      <view class="menu-item" @tap="bindWechat">
        <view class="left-content">
          <image src="/static/icons/wechat.png" mode="aspectFit" class="icon"></image>
          <text>微信账号</text>
        </view>
        <view class="right-content">
          <text class="status-text red">绑定微信账号后才可提现哦～</text>
          <text class="action-text">去绑定</text>
          <text class="iconfont icon-arrow-right"></text>
        </view>
      </view>
      <view class="menu-item">
        <view class="left-content">
          <image src="/static/icons/phone.png" mode="aspectFit" class="icon"></image>
          <text>手机账号</text>
        </view>
        <view class="right-content">
          <text class="phone-text">155****6511</text>
          <text class="iconfont icon-arrow-right"></text>
        </view>
      </view>
    </view>

    <!-- 新订单通知设置 -->
    <view class="section-title">新订单通知</view>
    <view class="menu-list">
      <view class="menu-item" @tap="toggleWechatNotify">
        <text>微信接收通知</text>
        <view class="right-content">
          <text class="status-text red">去开启</text>
          <text class="iconfont icon-arrow-right"></text>
        </view>
      </view>
    </view>

    <!-- 其他设置 -->
    <view class="menu-list">
      <view class="menu-item" @tap="toggleLocation">
        <text>开启定位</text>
        <view class="right-content">
          <text class="status-text blue">已开启</text>
          <text class="iconfont icon-arrow-right"></text>
        </view>
      </view>
      <view class="menu-item" @tap="goToEmergencyContact">
        <text>紧急联系人</text>
        <text class="iconfont icon-arrow-right"></text>
      </view>
      <view class="menu-item" @tap="goToBlacklist">
        <text>黑名单/不想被Ta看到</text>
        <text class="iconfont icon-arrow-right"></text>
      </view>
    </view>
    <!-- 其他选项 -->
    <view class="menu-list">
      <view class="menu-item" @tap="deleteAccount">
        <text>注销账号</text>
        <text class="iconfont icon-arrow-right"></text>
      </view>
      <view class="menu-item" @tap="goToAnnouncement">
        <text>平台公告</text>
        <text class="iconfont icon-arrow-right"></text>
      </view>
    </view>
  </view>
</template>

<script>
import NavBar from '@/components/nav-bar/nav-bar.vue'
export default {
	components: {
		NavBar
	},
  data() {
    return {
      allowContact: false
    }
  },

  methods: {
    goBack() {
      uni.navigateBack()
    },

    // 绑定微信账号
    bindWechat() {
      uni.showToast({
        title: '正在跳转微信授权',
        icon: 'none'
      })
    },

    // 切换微信通知状态
    toggleWechatNotify() {
      uni.showModal({
        title: '开启微信通知',
        content: '是否跳转到微信进行授权？',
        success: (res) => {
          if (res.confirm) {
            // 跳转微信授权
          }
        }
      })
    },

    // 切换定位状态
    toggleLocation() {
      uni.showModal({
        title: '定位服务',
        content: '是否修改定位权限设置？',
        success: (res) => {
          if (res.confirm) {
            uni.openSetting()
          }
        }
      })
    },

    // 切换商家联系权限
    toggleContact(e) {
      this.allowContact = e.detail.value
    },

    // 跳转到服务轨迹
    goToTrack() {
      uni.navigateTo({
        url: '/pages/technician/track'
      })
    },

    // 跳转到紧急联系人
    goToEmergencyContact() {
      uni.navigateTo({
        url: '/pages/technician/emergency-contact'
      })
    },

    // 跳转到黑名单
    goToBlacklist() {
      uni.navigateTo({
        url: '/pages/technician/blacklist'
      })
    },

    // 注销账号
    deleteAccount() {
      uni.showModal({
        title: '注销账号',
        content: '注销后账号将无法恢复，是否继续？',
        success: (res) => {
          if (res.confirm) {
            // 执行注销操作
          }
        }
      })
    },

    // 跳转到平台公告
    goToAnnouncement() {
      uni.navigateTo({
        url: '/pages/technician/notice'
      })
    },

    // 跳转到关于页面
    goToAbout() {
      uni.navigateTo({
        url: '/pages/common/about'
      })
    }
  }
}
</script>

<style lang="scss" scoped>
.settings-container {
  min-height: 100vh;
  background: #F5F5F5;
  padding-bottom: 40rpx;

  .custom-nav-bar {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    height: 88rpx;
    background: #FFFFFF;
    display: flex;
    align-items: center;
    padding: 0 30rpx;
    z-index: 100;
    
    .left {
      width: 88rpx;
      display: flex;
      align-items: center;
      
      .iconfont {
        font-size: 36rpx;
        color: #333333;
      }
    }
    
    .center {
      flex: 1;
      text-align: center;
      font-size: 32rpx;
      color: #333333;
      font-weight: 500;
    }
    
    .right {
      width: 88rpx;
    }
  }

  .section-title {
    padding: 30rpx;
    font-size: 28rpx;
    color: #666666;

    &:not(:first-child) {
      margin-top: 20rpx;
    }
  }

  .menu-list {
    background: #FFFFFF;
    margin-bottom: 20rpx;

    .menu-item {
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding: 30rpx;
      border-bottom: 2rpx solid #F5F5F5;

      &:last-child {
        border-bottom: none;
      }

      .left-content {
        display: flex;
        align-items: center;
        gap: 20rpx;

        .icon {
          width: 40rpx;
          height: 40rpx;
        }

        text {
          font-size: 28rpx;
          color: #333333;
        }
      }

      .right-content {
        display: flex;
        align-items: center;
        gap: 10rpx;

        .status-text {
          font-size: 26rpx;
          
          &.red {
            color: #FF4B4B;
          }
          
          &.blue {
            color: #2B85E4;
          }
        }

        .action-text {
          font-size: 26rpx;
          color: #2B85E4;
        }

        .phone-text {
          font-size: 28rpx;
          color: #666666;
        }

        .version-text {
          font-size: 26rpx;
          color: #999999;
        }

        .icon-arrow-right {
          font-size: 32rpx;
          color: #999999;
          margin-left: 10rpx;
        }
      }

      &.contact-setting {
        text {
          font-size: 28rpx;
          color: #333333;
        }
      }
    }
  }
}
</style> 